Lesson 4: Layout Techniques

CSS layout techniques are essential for creating responsive and structured web pages. The two most powerful tools for layout are Flexbox and CSS Grid, which allow you to control the arrangement of elements in a flexible and efficient way.

1. Introduction to CSS Flexbox

The Flexible Box Layout (Flexbox) is designed to provide a more efficient way to lay out, align, and distribute space among items within a container. Flexbox is great for one-dimensional layouts, meaning layouts that flow in one direction: either horizontally (row) or vertically (column).

Key Concepts of Flexbox:

• Flex Container: The parent element that contains flex items.
• Flex Items: The child elements inside the flex container.

Here’s how to set up Flexbox on a container:

.container {
  display: flex;
}

Main Properties of Flexbox:

1. flex-direction: Defines the direction of the flex items (row or column).

   .container {
     flex-direction: row; /* Default */
     /* Other options: column, row-reverse, column-reverse */
   }

2. justify-content: Aligns items along the main axis (horizontally if in row, vertically if in column).

   .container {
     justify-content: center;
     /* Other options: flex-start, flex-end, space-between, space-around */
   }

3. align-items: Aligns items along the cross axis (perpendicular to the main axis).

   .container {
     align-items: center;
     /* Other options: flex-start, flex-end, stretch */
   }

4. flex-wrap: Allows items to wrap onto multiple lines, useful for making items responsive.

   .container {
     flex-wrap: wrap;
     /* Other option: nowrap (default), wrap-reverse */
   }

5. flex-grow: Controls how much a flex item will grow relative to others.

   .item {
     flex-grow: 1;
   }

Example of Flexbox Layout:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .item {
    background-color: lightblue;
    padding: 20px;
    margin: 10px;
  }
</style>

This creates a simple horizontal layout where the items are evenly spaced.

2. Creating Layouts with CSS Grid

CSS Grid Layout is a powerful system for creating two-dimensional layouts (rows and columns). Grid provides precise control over both dimensions, making it ideal for complex layouts.

Key Concepts of Grid:

• Grid Container: The parent element that defines the grid.
• Grid Items: The child elements inside the grid container.

Here’s how to set up a grid layout:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns */
}

Main Properties of Grid:

1. grid-template-columns / grid-template-rows: Defines the number and size of columns or rows.

   .container {
     grid-template-columns: 200px 1fr 1fr; /* Fixed and flexible columns */
     grid-template-rows: auto 300px; /* First row auto height, second row 300px */
   }

2. grid-gap: Adds space between grid items (can also use row-gap and column-gap).

   .container {
     grid-gap: 20px;
   }

3. grid-area: Defines the placement of an item in the grid. Items can span multiple rows or columns.

   .item1 {
     grid-area: 1 / 1 / 2 / 3; /* Starts at row 1, column 1, ends at row 2, column 3 */
   }

Example of Grid Layout:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 10px;
  }

  .item1, .item2, .item3 {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
  }
</style>

This creates a grid with three columns where the second column is twice the size of the others.

3. Positioning Elements

CSS offers several ways to position elements:

1. static: The default position of an element (follows the normal document flow).
2. relative: The element is positioned relative to its normal position.
3. absolute: The element is positioned relative to its nearest positioned ancestor.
4. fixed: The element is positioned relative to the viewport, staying fixed even when scrolling.
5. sticky: The element toggles between relative and fixed positioning based on scroll position.

Example:

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

This positions the .box element 50px from the top and 100px from the left of its nearest positioned ancestor.